<template>
  <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
    <el-card shadow="hover">
      <template #header>
        <span>{{ title }}</span>
        <span>共{{ people + '人' }}</span>
      </template>
      <vab-chart
        :init-options="initOptions"
        :option="option"
        theme="vab-echarts-theme"
      />
    </el-card>
    <el-row :gutter="12">
      <el-col :span="8">
        <el-card shadow="always">
          <span>实名总数共{{ people + '人' }}</span>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <span>未审核人数 {{ option.series[0].data[1].value + '人' }}</span>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <span>审核通过人数 {{ option.series[0].data[2].value + '人' }}</span>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <span>审核失败人数 {{ option.series[0].data[3].value + '人' }}</span>
        </el-card>
      </el-col>
    </el-row>
  </el-col>
</template>

<script>
  import VabChart from '@/extra/VabChart'
  import { getList } from '@/api/tubiao' //doDelete,

  export default {
    name: 'VabChartPie',

    components: {
      VabChart,
    },
    props: {
      title: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        initOptions: {
          renderer: 'svg',
        },
        people: '',
        listLoading: false,
        option: {
          grid: {
            top: 20,
            right: 20,
            bottom: 40,
            left: 40,
          },
          tooltip: {
            trigger: 'item',
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['40%', '80%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2,
              },
              label: {
                show: false,
                position: 'center',
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '14',
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                { value: '', name: '实名总人数' },
                { value: '', name: '实名未审核人数' },
                { value: '', name: '实名审核通过人数' },
                { value: '', name: '实名审核未通过人数' },
                // { value: 300, name: '视频广告' },
              ],
            },
          ],
        },
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      async fetchData() {
        this.listLoading = true
        const res = await getList()
        this.option.series[0].data[0].value = res.starUserCount[0]
        this.option.series[0].data[1].value = res.starUserCount[1]
        this.option.series[0].data[2].value = res.starUserCount[2]
        this.option.series[0].data[3].value = res.starUserCount[3]
        this.people = res.starUserCount[0]
        this.listLoading = false
      },
    },
  }
</script>
